import { useState, useEffect } from "react";
import { Layout, message } from "antd";
import NavHeader from "./components/NavHeader";
import PageFooter from "./components/PageFooter";
import { getInfo, getUserById } from "./api/user";
import { changeLoginStatus, initUserInfo,setIsLoading } from "./redux/userSlice";
import { useDispatch } from "react-redux";
import "./css/App.css";
// import classname from "classnames";
// import RouterConfig from "./router/index.jsx";
import RouteBefore from "./router/RouteBefore"
import LoginForm from "./components/LoginForm";
const { Header, Footer, Content } = Layout;

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  // const [isLoading, setIsLoading] = useState(true);
  const dispatch = useDispatch();
  // 加载根组件的时候，需要恢复用户的登录状态
  useEffect(() => {
    async function fetchData() {
      const result = await getInfo();
      if (result.data) {
        // 说明 token 有效
        // 获取该 id 对应的用户信息，存储到状态仓库
        const { data } = await getUserById(result.data._id);
        // 存储到状态仓库
        dispatch(initUserInfo(data));
        dispatch(changeLoginStatus(true));
        dispatch(setIsLoading(false));
      } else {
        // 说明 token 过期了
        message.warning(result.msg);
        localStorage.removeItem("userToken");
      }
      dispatch(setIsLoading(false))
    }
    if (localStorage.getItem("userToken")) {
      fetchData();
    } else {
      dispatch(setIsLoading(false))
    }
  }, []);
  /**
   * 关闭弹框
   */
  function closeModal() {
    setIsModalOpen(false);
  }
  /**
   * 打开弹框
   */
  function loginHandle() {
    setIsModalOpen(true);
  }
  return (
    <div className="App">
      {/* 头部 */}
      <Header className="header">
        <NavHeader loginHandle={loginHandle} />
      </Header>
      {/* 匹配上的路由页面 */}
      <Content className="content">
        <FontAwesomeIcon icon="fa-brands fa-twitter" />
        <FontAwesomeIcon icon="fa-solid fa-heart" beat />
        <FontAwesomeIcon icon="fa-solid fa-circle-info" beatFade />
        <FontAwesomeIcon icon="fa-solid fa-basketball" bounce />
        <FontAwesomeIcon icon="fa-solid fa-triangle-exclamation" fade />
        <FontAwesomeIcon icon="fa-solid fa-compact-disc" flip />
        <FontAwesomeIcon icon="fa-solid fa-bell" shake />
        <FontAwesomeIcon icon="fa-solid fa-cog" spin />
        <FontAwesomeIcon icon="fa-solid fa-compass" spin spinReverse />
        <FontAwesomeIcon icon="fa-solid fa-spinner" spinPulse />
        <FontAwesomeIcon icon="fa-solid fa-cart-shopping" />
        <FontAwesomeIcon icon="fa-solid fa-money-bill" />
        <FontAwesomeIcon icon="fa-solid fa-volcano" />
        <RouteBefore />
      </Content>
      {/* 底部 */}
      <Footer className="footer">
        <PageFooter />
      </Footer>
      {/* 登录弹窗 */}
      <LoginForm isShow={isModalOpen} closeModal={closeModal} />
    </div>
  );
}

export default App;
